<template>
  <div class="plus-search-cell-outer">
    <template v-if="type === 'input'">
      <Input
      v-model='model1'
      type="text"
      :placeholder="cellProperty.placeholder"
      @input="handleInput"
      ></Input>
    </template>
    <template v-else-if="type === 'datetime'">
      <DatePicker
      name="start"
      type="datetime"
      v-model='model1'
      @on-change="handleChange"
      @click.stop.native="setWhichChoosed"
      :placeholder="cellProperty.placeholderStart" ></DatePicker>
      ~
      <DatePicker
      type="datetime"
      name="end"
      v-model='model2'
      @on-change="handleChange"
      @click.stop.native="setWhichChoosed"
      :placeholder="cellProperty.placeholderEnd" ></DatePicker>
    </template>
    <template v-else-if="type === 'select'">
      <Select v-model='model1' @input="handleInput" :placeholder="cellProperty.placeholder">
          <Option v-for="opt in cellProperty.options" :key="opt.key" :value="opt.val">{{opt.key}}</Option>
      </Select>
    </template>
    <template v-else-if="type === 'checkbox'">
      <CheckboxGroup v-model='model1' @input="handleInput">
          <Checkbox v-for="opt in cellProperty.options" :key="opt.key" :label="opt.val">{{ opt.key }}</Checkbox>
      </CheckboxGroup>
    </template>
    <template v-else-if="type === 'radio'">
      <RadioGroup v-model='model1' @input="handleInput">
          <Radio v-for="opt in cellProperty.options" :key="opt.key" :label="opt.val">{{ opt.key }}</Radio>
      </RadioGroup>
    </template>
    <template v-else>
      <Input v-model='model1' type="text" @input="handleInput" :placeholder="cellProperty.placeholder"></Input>
    </template>
  </div>
</template>

<script>
import StringUtil from '@/libs/string-util'

export default {
  name: 'CommonFormCell',
  props: {
    cellProperty: Object,
    value1: {
      type: [Object, Array, String, Boolean, Number],
      default () {
        return ''
      }
    },
    value2: {
      type: [Object, Array, String],
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      type: 'text',
      which_choosed: 'default',
      model1: '',
      model2: ''
    }
  },
  computed: { },
  mounted () {
    this.type = this.cellProperty.type
    this.model1 = StringUtil.isNotEmpty(this.value1) ? this.value1 : this.cellProperty.default
    if (this.type === 'datetime' || this.type === 'date') {
      this.model2 = StringUtil.isNotEmpty(this.value2) ? this.value2 : this.cellProperty.default2
    }
  },
  methods: {
    handleInput (value) {
      this.$emit('input', value)
      this.$emit('on-change', this.cellProperty.name, value)
    },
    handleChange (value, type) {
      let name = this.cellProperty.name
      if (this.which_choosed !== 'default') name += '_' + this.which_choosed
      this.$emit('input', value)
      this.$emit('on-change', name, value)
    },
    setWhichChoosed (event) {
      if (event.target.name) this.which_choosed = event.target.name
    },
    setDefaultValue () {
      this.type = this.cellProperty.type
      this.model1 = StringUtil.isNotEmpty(this.value1) ? this.value1 : this.cellProperty.default
      if (this.type === 'datetime' || this.type === 'date') {
        this.model2 = StringUtil.isNotEmpty(this.value2) ? this.value2 : this.cellProperty.default2
      }
    }
  },
  watch: {
    value1 (val, old) {
      if (val === this.cellProperty.default) {
        this.setDefaultValue()
      }
    },
    value2 (val) {
      if (val === this.cellProperty.default2) {
        this.setDefaultValue()
      }
    }
  }
}
</script>

<style lang="less">
.tables-edit-outer{
  height: 100%;
  .tables-edit-con{
    position: relative;
    height: 100%;
    .value-con{
      vertical-align: middle;
    }
    .tables-edit-btn{
      position: absolute;
      right: 10px;
      top: 0;
      display: none;
    }
    &:hover{
      .tables-edit-btn{
        display: inline-block;
      }
    }
  }
  .tables-editting-con{
    .tables-edit-input{
      width: ~"calc(100% - 60px)";
    }
  }
}
</style>
